var initPos = false;
var collection = false;
$(document).ready(selectAndDrag());

function selectAndDrag() {
	$('#selectable1').selectable( { } );
	$('div.selectableItem').draggable({
		helper: 'original',
		start: function(e, ui) {
			if ($(this).is('div.ui-selected')) {
				initPos = {x: parseInt(this.style.left,10),y:parseInt(this.style.top,10)};
				collection = jQuery('div.ui-selected:visible').not(this);
				if (collection.size() == 0) {
					initPos = false;
					collection = false;
				}
			}
		},
		drag: function(e, ui) {
			if (collection) {
				var x = ui.position.left;
				var y = ui.position.top;
				collection.each( function() {
					this.style.left = parseInt(this.style.left,10)+ x - initPos.x + 'px';
					this.style.top = parseInt(this.style.top,10)+y - initPos.y + 'px';
				});
				initPos = {x:x, y:y};
			}
		},
		stop : function(e,ui) {
			initPos = false;
			collection = false;	
		}
	});
});


